<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2025-10-13 22:48:50
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-11-05 17:11:15
 * @FilePath: \BLOG\src\views\home\components\HotArticle.vue
-->
<template>
  <div class="hot-article">
    <div class="slider-title">
      🔥 热门文章
      <div class="mac-style"></div>
    </div>
    <div class="hot-article-item-wrap" v-if="state.hotArticleList.length > 0">
      <div
        class="hot-article-item hover-shadow kbn-read"
        :data-tip="item.title.length > 16 ? item.title.slice(0, 16) + '...' : item.title"
        @click="handleArticle(item)"
        v-for="(item, index) in state.hotArticleList"
        :key="index">
        <LImg class="cover-img" :src="item.cover" :isUnPreview="true" />
        <div class="info">
          <div class="article-title text">{{ item.title }}</div>
          <div class="h">
            <IconHot class="iconfont"></IconHot>
            <span class="num">{{ item.readCount || 0 }}</span>
            - {{ item.createTime }}
          </div>
        </div>
        <div class="top" :class="'top-' + (index + 1)">{{ index + 1 }}</div>
      </div>
    </div>
    <div class="m-no-article" style="padding: 15px" v-else>
      <Empty :text="'暂无热门文章，期待您的分享~'" :loadingText="'热门文章正在拼命加载中...'" :loading="state.hotArticleLoading" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getTopArticle } from '@/api/article';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useAppStore } from '@/store/app';
import moment from 'moment';

const router = useRouter();
const store = useAppStore();

const state = reactive({
  hotArticleList: [],
  hotArticleLoading: false
});

// 获取热门文章
const getTopArticleFn = async () => {
  try {
    state.hotArticleLoading = true;
    const res = await getTopArticle();
    if (res.code === 200) {
      state.hotArticleList = res.data;
      state.hotArticleList.forEach(item => {
        item.cover = import.meta.env.VITE_CURRENT_ENV == 'dev' ? import.meta.env.VITE_DEV_BASE_SERVER + item.cover : store.projectConfig.bsServerUrl + item.cover;
        item.createTime = item.createTime && moment(item.createTime).format('YYYY-MM-DD');
      });
    }
  } catch (error) {
  } finally {
    state.hotArticleLoading = false;
  }
};
getTopArticleFn();

// 点击文章详情
const handleArticle = (row: any) => {
  router.push({
    path: '/article/detail',
    query: {
      id: row.id
    }
  });
};
</script>

<style lang="scss" scoped>
.hot-article {
  margin-top: 20px;
  background-color: #fff;
  .hot-article-item-wrap {
    padding: 10px;
    .hot-article-item {
      position: relative;
      width: 100%;
      margin-top: 10px;
      border-radius: var(--border-radius-1);
      overflow: hidden;
      transition: opacity 0.8s ease-in-out;
      background-color: var(--bg-content-color);
      box-shadow: var(--box-shadow);
      padding-bottom: 10px;
      &:first-child {
        margin-top: 0;
      }
      .cover-img {
        width: 100%;
        height: 120px;
        transition: transform 0.8s ease-in-out;
        &:hover {
          transform: scale(1.1);
        }
      }
      .info {
        width: 100%;
        height: 100%;
        padding: 0px 10px;
        margin-top: 10px;
        .article-title {
          color: var(--text-color);
          // 两行显示省略号
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
          text-shadow: var(--text-shadow);
          font-size: 16px;
          margin: 5px 0;
        }
        .h {
          display: flex;
          align-items: center;
        }
        .num {
          margin: 0 5px;
          color: var(--theme-color);
        }
      }
      .top {
        // 右旋转45度
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        position: absolute;
        top: 10px;
        right: -20px;
        width: 80px;
        height: 20px;
        color: #fff;
        text-align: center;
        line-height: 20px;
      }
      .top-1 {
        background-color: #ff183b;
      }
      .top-2 {
        background-color: #ff5c38;
      }
      .top-3 {
        background-color: rgb(242, 193, 16);
      }
    }
  }
}
</style>
